day: 22
title: "[Day 22] 大字級時固定在底部的操作列吃掉半個畫面：用 isAccessibilitySize 把次要操作移進內容裡捲動"
published_at:
updated_at: 2026-10-06
url:
status: draft

文章同步發表在我的個人 Blog

大字級時固定在底部的操作列吃掉半個畫面：用 isAccessibilitySize 把次要操作移進內容裡捲動

釘在畫面底部的按鈕，字級放大之後會變成什麼樣子？

Day 20 截圖自審時，我記下一個 P2：卡片詳情在大字級下，底部固定的兩顆按鈕占掉大半個畫面。今天把它修掉。先講結果：大字級時，次要操作改成跟著內容一起捲動，只有主要操作還釘在底部；內容區從只看得到一則留言，變成整個畫面都是內容。

1. 問題：按鈕比內容還大

卡片詳情的底部有兩顆次要按鈕：「標記完成」和「用 LINE 告訴他」。一般字級下它們很小，沒有問題。調到大字級（Dynamic Type 的 accessibility3）之後：

左邊是修改前：兩顆按鈕固定在畫面下半部，留言區只剩一則留言的上半截；「用 LINE 告訴他」還斷成兩行。

2. 為什麼會這樣

這個操作列是用 safeAreaInset(edge: .bottom) 固定在底部的。字級放大時，按鈕裡的文字變大、換行，按鈕變高；固定列變高，能給內容的空間就跟著縮小。內容區是用剩下的空間，所以字級越大，內容越少，這正好跟需要大字級的人想看到的相反。

3. 做法：大字級時，次要操作移進內容

SwiftUI 的環境值 dynamicTypeSize 有一個屬性 isAccessibilitySize，可以知道現在是不是無障礙字級。我的做法是把操作分成兩種：

• 主要操作（對方丟來的事要按「知道了」）：一律釘在底部，這是整個 App 的核心，要隨時點得到。
• 次要操作（標記完成、用 LINE 告訴他）：一般字級仍釘在底部；無障礙字級時，放到內容的最後面，跟著一起捲。

@Environment(\.dynamicTypeSize) private var dynamicTypeSize

// scroll content
if dynamicTypeSize.isAccessibilitySize {
    secondaryActions                      // scrolls with the content
}

// pinned bar
if model.isPendingForMe { PrimaryButton(...) }          // always pinned
if !dynamicTypeSize.isAccessibilitySize { secondaryActions }

還有一個小細節：大字級時，如果沒有「知道了」要按、也沒有儲存失敗的提示，固定列就整個不顯示，不留一條空白的底。

4. 先寫測試

照這個專案的流程，先寫測試、看到紅燈，再改程式。測試用 XCUITest，分兩個情境：

• 大字級（accessibility5）：打開有留言的卡片，「標記完成」一開始不能是可以點的狀態（它在內容最後面，要捲才看得到）；捲到底之後可以點，而且位置在留言輸入鈕的下面，沒有蓋住留言區。
• 一般字級：「標記完成」不用捲動就點得到，維持釘在底部。

改程式之前，大字級的測試失敗、一般字級的測試通過（本來就是這樣）；改完之後兩個都通過。

5. 結果

兩種大字級下，標題、留言都占滿畫面，不再被按鈕蓋住。

6. 目前的狀態

明天

Day 23 繼續實際使用，挑下一個觀察到的問題。

參考資源

官方文件

• isAccessibilitySize（DynamicTypeSize）：判斷目前的字級是不是無障礙字級
• safeAreaInset(edge:alignment:spacing:content:)：把內容固定在指定的邊，內容區使用剩下的空間